<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible="open"
      width="480px"
      append-to-body
      @close="cancel()"
      :show-close="false"
    >
      <div class="content">
        <div class="flex title">
          <img class="icon" :src="url" alt="加载失败" />
          {{ title }}
        </div>
        <div class="tip">{{ tip }}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>

export default {
  props: {
    open: Boolean,
    url:{type:String,default:require('@/assets/images/reminder.png')},
    title: String,
    tip: String,
  },
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("update:open", false);
    },
    submit() {
      this.$emit("update:open", false);
      this.$emit("refresh");
    },
  },
};
</script>
  <style scoped lang="scss">
.content {
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    line-height: 21px;
    .icon {
      margin: 0 17px 0 34px;
      width: 21px;
      height: 21px;
    }
  }
  .tip {
    margin: 12px 72px 0 72px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
  }
}
::v-deep .el-dialog__header {
  padding: 16px !important;
  border-bottom: none;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}
::v-deep .el-dialog__footer {
  padding: 24px !important;
  border-top: none;
}
</style>
